Code mẫu JavaScript đồng bộ tooltip trên nhiều biểu đồ/đồ thị
Mẫu biểu đồ Syncing Tooltip cho phép phân tích các tham số trên nhiều biểu đồ trong một trang. Thư viện CanvasJS cung cấp API để tạo mẫu tương tự. Dưới đây là mã JavaScript tạo biểu đồ dữ liệu phân tích web với tooltip đồng bộ.
```html
new CanvasJS.Chart("chartContainer3", pageViewsOptions),
new CanvasJS.Chart("chartContainer4", bounceRateOptions)
];
// Đồng bộ tooltip cho các biểu đồ
function syncTooltip(charts) {
for (let i = 0; i < charts.length; i++) {
charts[i].render();
if (!this.onToolTipUpdated) {
this.onToolTipUpdated = function(e) {
for (let j = 0; j < charts.length; j++) {
if (charts[j] !== e.chart) {
charts[j].toolTip.showAtX(e.entries[0].xValue);
}
}
};
}
if (!this.onToolTipHidden) {
this.onToolTipHidden = function(e) {
for (let j = 0; j < charts.length; j++) {
if (charts[j] !== e.chart) {
charts[j].toolTip.hide();
}
}
};
}
}
}
// Cập nhật tooltip nếu cần
for (let i = 0; i < charts.length; i++) {
if (!charts[i].options.toolTip) {
charts[i].options
Dưới đây là phiên bản ngắn gọn của nội dung bạn đã cung cấp:
```html
```
Tóm tắt:
- Thiết lập các container cho biểu đồ với chiều cao 370px và chiều rộng 100%.
- Sử dụng thư viện CanvasJS để vẽ biểu đồ và hỗ trợ tùy biến cùng đồng bộ hóa các trục.
Source: https://quantrimang.com/hoc/code-mau-javascript-dong-bo-tooltip-tren-nhieu-bieu-do-do-thi-195033